<template>
	<view class="question-wrap">
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">登录授权</block>
		</cu-custom>
		<loading-view v-show="showLoading"></loading-view>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="login" v-if="is_auth">
				<view class="login_a">
					<image :src="avatar_logo"></image>
				</view>
				<view class="login_bb">{{nickName}}</view>
				<view class="login_d" @click="mpWxLogin()">手机号快捷登录</view>
				<view class="login_e" @click="navigateBack_ls();">暂不授权</view>
			</view>
			<view class="login" v-else>
				<button class="login_a" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="avatar_logo"></image>
				</button>
				<view class="login_b">
					<view class="login_b_a">昵称</view>
					<view class="login_b_b">
						<input type="nickname" v-model="nickName" @blur="nickName_blur" class="weui-input" placeholder="请输入昵称"/>
					</view>
				</view>
				<view class="login_c">为了提供更优质的服务，需要获取您的手机号</view>
				<button class="login_d" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">手机号快捷登录</button>
				<view class="login_e" @click="navigateBack_ls();">暂不授权</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import storage from '@/common/storage.js';
	export default {
	  data() {
	    return {
		  showLoading:true,
	      //屏幕高度
	      screenHeight: 0,
		  avatar:'',
		  avatar_logo:request.baseUrl+'img/avatar.png',
		  nickName:'',
		  is_auth:true,
		  code:'',
		  distribution_code:'',
	    };
	  },
	  onShow(){
		this.distribution_code=uni.getStorageSync('tj_code');
	  },
	  mounted() {
		this.code_post();
	  },
	  methods: {
		  nickName_blur(e){
			  this.nickName=e.detail.value;
		  },
		  code_post(){
			  let _this=this;
			  wx.login({
			  	success: (loginRes) => {
			  		_this.code = loginRes.code;
			  		_this.login_jc_post();
			  	},
			  })
		  },
		  login_jc_post(){
			  let paramsList = {
			  	code:this.code
			  }
			  let optsList = {
			  	url: 'a-wxlogin_dl',
			  	method: 'post'
			  };
			  let _this=this;
			  request.httpRequest(optsList, paramsList).then(res => {
			  	if(res.data.code == 200){
			  		_this.avatar=res.data.data.avatar;
			  		_this.avatar_logo=res.data.data.avatar;
					_this.nickName=res.data.data.nickName;
			  	}else{
					_this.is_auth=false;
				}
				wx.login({
					success: (loginRes) => {
						_this.code = loginRes.code;
					},
				})
				_this.showLoading=false;
			  });
		  },
		  onChooseAvatar(e){
			  const {avatarUrl} = e.detail;
			  let _this=this;
			  uni.uploadFile({
			  	url: request.baseUrl+'p-icon', // 仅为示例，非真实的接口地址
			  	filePath: avatarUrl,
			  	name: 'file',
			  	success: (res) => {
			  		let data= JSON.parse(res.data);
			  		setTimeout(() => {
			  			_this.avatar_logo = data.data.url;
			  			_this.avatar = data.data.base_url;
			  		}, 1000)
			  	}
			  });
		  },
		  navigateBack_ls() {
		  	uni.navigateBack({
		  		delta: 1
		  	});
		  },
		  mpWxLogin() {
			  uni.showLoading({
			  	title: '登录中...',
			  	mask: true
			  })
			  let _this=this;
			  let paramsList = {
			  	code: this.code, //code
			  	nickname: this.nickName, //微信名
			  	avatar: this.avatar_logo, //头像
			  	encryptedData: this.encryptedData,
			  	iv:this.iv,
			  	distribution_code:this.distribution_code,
			  }
			  let optsList = {
			  	url: 'a-wxlogin',
			  	method: 'post'
			  };
			  request.httpRequest(optsList, paramsList).then(res => {
			  	uni.hideLoading();
			  	if(res.data.code == 200){
			  		uni.setStorageSync('token', res.data.data.token);
			  		uni.setStorageSync("uid", res.data.data.uid);
					uni.setStorageSync("code", res.data.data.code);
					storage.currentUser=res.data.data.user_info;
					uni.$emit('selectWxrole');
					uni.navigateBack();
			  		return;
			  	}else{
			  		wx.login({
			  			success: (loginRes) => {
			  				_this.code = loginRes.code;
			  			},
			  		})
			  		uni.showToast({
			  		    title:'授权失败，请重新点击',
			  			icon:'none',
			  		    duration: 2000
			  		});
			  	}
			  });
		  },
		  getPhoneNumber:function(e){
			this.encryptedData = e.detail.encryptedData;
			if(!this.encryptedData){
				uni.showToast({
				    title:'您已拒绝授权，请重新点击并授权',
					icon:'none',
				    duration: 2000
				});
				return;
			}
			this.iv = e.detail.iv;
			if(!this.avatar){
				uni.showToast({
				    title:'请上传头像',
					icon:'none',
				    duration: 2000
				});
				return;
			}
			if(!this.nickName){
				uni.showToast({
				    title:'请输入昵称',
					icon:'none',
				    duration: 2000
				});
				return;
			}
			this.mpWxLogin();
		  }
	  }
	}
</script>

<style>
	page {
	  width: 100%;
	  height: 100%;
	}
	.question-wrap {
	  background-size: 100%;
	  width: 100%;
	  min-height: 100%;
	  background-repeat: no-repeat;
	}
	.login_a{
		width: 221rpx;
		height: 221rpx;
		margin: auto;
		margin-top: 135rpx;
		border-radius: 50%;
		padding:0;
		overflow: hidden;
		background-color:#FFFFFF;
		border: 0;
	}
	.login_a image{
		width: 221rpx;
		height: 221rpx;
		border-radius: 50%;
	}
	.login_b{
		width: 500rpx;
		height: 100rpx;
		border: 1rpx solid #cccccc;
		border-radius: 10rpx;
		margin: auto;
		margin-top: 24rpx;
		padding: 0 30rpx;
	}
	.login_b_a{
		float: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 100rpx;
	}
	.login_b_b{
		float: right;
		width: 350rpx;
		height: 100rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 100rpx;
	}
	.login_b_b input{
		width: 350rpx;
		height: 100rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 100rpx;
	}
	.login_c{
		font-size: 24rpx;
		font-family: DengXian;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		margin: auto;
		margin-top: 22rpx;
	}
	.login_d{
		width: 503rpx;
		height: 79rpx;
		background-color:#62469B !important;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: DengXian;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 79rpx;
		text-align: center;
		margin: auto;
		margin-top: 93rpx;
	}
	.login_e{
		width: 503rpx;
		height: 79rpx;
		background: #BDBDBD;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: DengXian;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 79rpx;
		text-align: center;
		margin: auto;
		margin-top: 26rpx;
	}
	.login_bb{
		font-size: 30rpx;
		font-family: DengXian;
		font-weight: bold;
		color: #fff;
		margin-top: 24rpx;
		text-align: center;
	}
</style>